.top{
  border-bottom: 1px solid #f5f5f5;
  
  .area{
    display: flex;
    justify-content: space-between;
    height: 41px;
    line-height: 41px;

    // 左侧区域
    .left-area{
      display: flex;

      .logo{
        a{
          position: relative;
          z-index: 20;
          display: block;
          width: 150px;
          text-indent: -9999px;
          background: url('@/assets/top_logo.png') no-repeat center center;
        }
      }

      .recommend{
        position: relative;

        .recommend-ad{
          position: absolute;
          display: none;
          width: 970px;
          height: 185px;
          left: -150px;
          top: 0;
          /* 让弹出框盖住其他元素(相对定位的元素) */
          z-index: 10;
        }

        &:hover .recommend-ad{
          display: block;
        }
      }
    }

    // 右侧区域
    .right-area{
      display: flex;
      
      .item {

        .growth {
          position: relative;
          display: block;
          font-size: 14px;
          color: #464646;
          margin-right: 20px;
          padding-left: 30px;

          .icon-grow{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            margin: auto 0;
            width: 30px;
            height: 30px;
            background: url('@/assets/top_sprite.png') no-repeat -30px 0;
          }
        }

        .ranking{
          position: relative;
          padding-right: 30px;
          cursor: pointer;

          &::after{
            content: '';
            position: absolute;
            width: 30px;
            height: 30px;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto 0;
            background: url('@/assets/top_sprite.png') no-repeat 0 0;
            opacity: 0.2;
            transform: rotate(90deg);
          }

          .dropdown{
            position: absolute;
            display: none;
            justify-content: flex-end;
            flex-wrap: wrap;
            box-sizing: border-box;
            padding-left: 30px;
            right: 0;
            width: 707px;
            height: 580px;
            background: #fafafa;
            
            .main-title{
              display: block;
              width: 224px;
              height: 40px;
              color: #333;
              font-weight: bold;
            }

            .sub-title{
              position: relative;
              display: block;
              font-size: 12px;

              .game-num{
                position: relative;
                z-index: 20;
                display: inline-block;
                margin-right: 12px;
                width: 16px;
                height: 16px;
                line-height: 16px;
                text-align: center;
                color: #fff;
                background-color: #ccc;

                &.active{
                  background-color: #c62828;
                }
              }

              .desc{
                display: none;
                position: absolute;
                z-index: 10;
                top: 12px;
                width: 200px;
                height: 90px;
                
                img{
                  width: 100%;
                }

                .cover{
                  position: absolute;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  display: flex;
                  justify-content: space-between;
                  height: 28px;
                  line-height: 28px;
                  background: rgba(0, 0, 0, 0.7);

                  a{
                    width: 50%;
                    color: #fff;
                    text-align: center;
                  }
                }
              }
              
              &:hover{
                height: 100px;
              }

              &:hover .desc{
                display: block;
              }
            }
          }

          &:hover .dropdown{
            display: flex;
            animation: hiddenToDisplay 0.3s ease forwards;
          }
        }
      }
    }
  }
}

@keyframes hiddenToDisplay {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}